<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>党建大数据</title>


    <!--引入核心 css 跟js 文件-->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery-3.1.1.js"></script>
    <script src="./js/bootstrap.js"></script>

    <!--引入 独立 css文件-->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <div>
            <img src="./imgs/index_img1.png" width="52" height="52" alt="标题图标">
            <span>党建大数据</span>
        </div>
    </header>
    <div class="cc-body">
        <!--左侧区域-->
        <div class="cc-body-left">
            <div class="cc-left-content">
                <header>
                    <span class="cc-left-content-header1">学习标兵</span>
                    <span class="cc-left-content-header2">7人</span>
                </header>
                <article>

                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>
                    <section>
                        <div class="cc-img-title">
                            <img src="./imgs/index_img4.png" alt="标兵头像">
                            <span>好人好事</span>
                        </div>
                        <div class="cc-img-content">
                            <header>杨明</header>
                            <article>在寒冬的一个春节，月黑风高，勇敢跳进河里救起一个失足少女</article>
                        </div>
                    </section>

                </article>

            </div>
        </div>
        <!--右侧区域-->
        <div class="cc-body-right">
            <section class="cc-right-section1">
                <div class="cc-sub-section1">
                    <header>
                        <span style="font-size: 14px;margin-right: 6px">社区党员总人数</span>
                        <span style="font-size: 30px;margin-left: 6px">63人</span>
                    </header>
                    <article>
                        <div class="cc-man-content">
                            <img src="./imgs/index_img5.png" alt="男士">
                            <span style="font-size: 16px;margin-top: 14px">42人</span>
                        </div>
                        <div class="cc-man-content">
                            <img src="./imgs/index_img6.png" alt="女士">
                            <span style="font-size: 16px;margin-top: 14px">21人</span>
                        </div>
                    </article>
                </div>
                <div id="ccEchart1" class="cc-sub-section2">

                </div>
                <div id="ccEchart2" class="cc-sub-section3">

                </div>
            </section>

            <section class="cc-right-section2">
                <div class="cc-section2-content1">
                    <header style="font-size: 32px;margin-bottom: 11px">学习分享</header>
                    <article>
                        <div class="cc-content1-item cc-border-right">
                            <span style="font-size: 18px">领导讲话</span>
                            <span style="font-size: 36px">17</span>
                            <div style="display: flex;align-items: center">
                                <img src="./imgs/index_img7.png" style="width: 14px;height: 16px">
                                <span style="font-size: 18px;color: #7ba82d">88.90%</span>
                            </div>
                        </div>
                        <div class="cc-content1-item cc-border-right">
                            <span style="font-size: 18px">党章学习</span>
                            <span style="font-size: 36px">329</span>
                            <div style="display: flex;align-items: center">
                                <img src="./imgs/index_img7.png" style="width: 14px;height: 16px">
                                <span style="font-size: 18px;color: #7ba82d">765.79%</span>
                            </div>
                        </div>
                        <div class="cc-content1-item cc-border-right">
                            <span style="font-size: 18px">党史学习</span>
                            <span style="font-size: 36px">87</span>
                            <div style="display: flex;align-items: center">
                                <img src="./imgs/index_img7.png" style="width: 14px;height: 16px">
                                <span style="font-size: 18px;color: #7ba82d">262.50%</span>
                            </div>
                        </div>
                        <div class="cc-content1-item">
                            <span style="font-size: 18px">两学一做</span>
                            <span style="font-size: 36px">110905</span>
                            <div style="display: flex;align-items: center">
                                <img src="./imgs/index_img7.png" style="width: 14px;height: 16px">
                                <span style="font-size: 18px;color: #7ba82d">124.47%</span>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="cc-section2-content2">
                    <header>
                        <div class="cc-btn-group">
                            <div class="cc-btn1 cc-btn-active">阅读量</div>
                            <div class="cc-btn2">被转发</div>
                            <div class="cc-btn3">被评论</div>
                        </div>

                        <div class="cc-time-btn-group">
                            <div class="cc-time-btn cc-time-btn1 cc-time-active">近7天</div>
                            <div class="cc-time-btn cc-time-btn2">近30天</div>
                            <input id="ccTimePicker" name="reservation" readonly type="text" value="2017-07-24 - 2017-08-03">
                        </div>
                    </header>

                    <article id="ccEchart3"></article>
                </div>
            </section>

            <footer style="width: 100%;z-index: 10000">
                <div id="ccEchart4" style="width: 100%;height:306px;"></div>
            </footer>
        </div>
    </div>
    <!--引入 echarts 核心文件-->
    <script src="./lib/echarts/echarts-all.js"></script>
    <script src="./lib/echarts/eventRiver2_data.js"></script>
</body>


<!--datarangepicker 核心文件-->
<link rel="stylesheet" type="text/css" media="all" href="./lib/dataRangePicker/daterangepicker-bs3.css"/>
<script src="./lib/dataRangePicker/moment.js"></script>
<script src="./lib/dataRangePicker/daterangepicker.js"></script>


<script src="./biz/index.js"></script>
</html>